<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Markdown 转换结果</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background: #f8f9fa;
    }
    
    .header {
      text-align: center;
      margin-bottom: 30px;
      padding: 20px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .header h1 {
      color: #333;
      margin: 0;
    }
    
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }
    
    .panel {
      background: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .panel h2 {
      margin-top: 0;
      color: #333;
      border-bottom: 2px solid #4285f4;
      padding-bottom: 10px;
    }
    
    .content {
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 6px;
      padding: 15px;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-wrap: break-word;
      max-height: 500px;
      overflow-y: auto;
    }
    
    .markdown-content {
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 6px;
      padding: 15px;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-wrap: break-word;
      max-height: 500px;
      overflow-y: auto;
    }
    
    .preview {
      background: white;
      border: 1px solid #e9ecef;
      border-radius: 6px;
      padding: 15px;
      max-height: 500px;
      overflow-y: auto;
    }
    
    .actions {
      text-align: center;
      margin-top: 20px;
    }
    
    .btn {
      background: #4285f4;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      margin: 0 10px;
      transition: background 0.3s;
    }
    
    .btn:hover {
      background: #3367d6;
    }
    
    .btn-secondary {
      background: #6c757d;
    }
    
    .btn-secondary:hover {
      background: #545b62;
    }
    
    .full-width {
      grid-column: 1 / -1;
    }
    
    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>HTML to Markdown 转换结果</h1>
  </div>
  
  <div class="container">
    <div class="panel">
      <h2>原始 HTML</h2>
      <div class="content" id="originalHtml">等待加载...</div>
    </div>
    
    <div class="panel">
      <h2>转换后的 Markdown</h2>
      <div class="markdown-content" id="markdownResult">等待加载...</div>
    </div>
    
    <div class="panel full-width">
      <h2>Markdown 预览</h2>
      <div class="preview" id="markdownPreview">等待加载...</div>
    </div>
  </div>
  
  <div class="actions">
    <button class="btn" id="copyMarkdown">复制 Markdown</button>
    <button class="btn btn-secondary" id="copyHtml">复制 HTML</button>
    <button class="btn btn-secondary" onclick="window.close()">关闭</button>
  </div>
  
  <script src="result.js"></script>
</body>
</html>